<template>
    <div class="search-result">
        <van-list v-model:loading="state.loading" :finished="state.finished" 
        v-model:error="state.error"
        error-text="加载失败,请重试"
        finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="item in state.list" :key="item.id" :title="item.title" />
        </van-list>

    </div>
</template>

<script>
import { ref, onMounted, reactive } from 'vue';
import { getSearchResult } from '../../../api/search';

 

export default {
    //组件使用项目  
     props: {
        
         searchText :{ type:String,required:true } 
        },
    //使用组件 
    //components:{ArticleItem },



    setup(props) {

        const state=reactive({
            list:[],
            loading:false,
            finished:false,
            pagenum:1,
            error:false
        }); 
 
        const onLoad = async () => {
            // 异步更新数据
            try {
                console.log("search text",props.searchText);

                //return;
                const { data } = await getSearchResult({
                    pagenum: state.pagenum,
                    q: props.searchText
                })

                console.log("查询结果",data.data);
                
                //将本次加载的loading关闭掉
                state.loading=false;
                //判断是否还有数据
                if(data.data.list.length>0)
                {
                    //将数据填充到数组中
                    state.list.push(...data.data.list);
                    state.pagenum=data.data.p_num;
                }else
                {
                    state.finished=true;
                }
            } catch (error) {
                state.error=true;
                state.loading=false;
                console.error(error)
            }
            
        };

        return {
            state,
            onLoad
           
        };
    },
};
</script>
<style>
.container {
    display: flex;
}
</style>